<!DOCTYPE html>
<html>
<head>
  <base href="/">
  <title>订单支付 - ToyqoMall</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    .payment-container {
      max-width: 1000px;
      margin: 30px auto;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    /* 保留原有样式... */

    .payment-qrcode {
      text-align: center;
      margin: 30px 0;
    }

    .payment-qrcode img {
      width: 200px;
      height: 200px;
      border: 1px solid #eee;
      padding: 10px;
    }

    .payment-qrcode p {
      margin-top: 15px;
      color: #666;
    }

    .payment-actions {
      text-align: center;
      margin-top: 30px;
    }

    .btn-pay {
      background-color: #76aa6f;
      color: white;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn-pay:hover {
      background-color: #5d9957;
    }

    .btn-cancel {
      background-color: #f0f0f0;
      color: #333;
      border: none;
      padding: 12px 30px;
      font-size: 16px;
      font-weight: bold;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 15px;
      transition: background-color 0.3s;
    }

    .btn-cancel:hover {
      background-color: #e0e0e0;
    }

    .payment-timer {
      text-align: center;
      margin-top: 20px;
      color: #ff6b6b;
      font-size: 14px;
    }

    .countdown {
      font-weight: bold;
    }

    .payment-notice {
      margin-top: 30px;
      padding: 15px;
      background-color: #fff8e1;
      border-radius: 8px;
      color: #856404;
      font-size: 14px;
    }

    .payment-success {
      display: none;
      text-align: center;
      padding: 30px;
      background-color: #f0f7ee;
      border-radius: 8px;
      margin: 30px 0;
    }

    .payment-success i {
      font-size: 60px;
      color: #76aa6f;
      margin-bottom: 20px;
    }

    .payment-success h3 {
      color: #333;
      margin-bottom: 15px;
    }

    .payment-success p {
      color: #666;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
<!-- 引入导航栏 -->
<input type="hidden" id="orderIdInput" th:value="${orderid}" />

<!-- 添加调试信息，仅在开发环境显示 -->
<!--<div th:if="${@environment.getProperty('spring.profiles.active') == 'dev'}" style="background-color: #f8d7da; padding: 10px; margin-bottom: 10px; border-radius: 5px;">-->
<!--  <p>调试信息（仅开发环境可见）：</p>-->
<!--  <p>订单ID: <span th:text="${orderid}"></span></p>-->
<!--  <p>订单对象: <span th:text="${order != null ? '存在' : '不存在'}"></span></p>-->
<!--  <p>二维码: <span th:text="${qrcode != null ? '已生成' : '未生成'}"></span></p>-->
<!--</div>-->



<div class="container">
  <div class="payment-container">
    <div class="payment-header">
      <h2>订单支付</h2>
      <p>请使用支付宝扫描二维码完成支付</p>
    </div>

<!--    <div class="order-info">-->
<!--      <div class="order-info-item">-->
<!--        <span class="order-info-label">订单编号：</span>-->
<!--        <span class="order-info-value" id="order-code" th:text="${orderid}"></span>-->
<!--      </div>-->
<!--      <div class="order-info-item">-->
<!--        <span class="order-info-label">订单总额：</span>-->
<!--        <span class="order-info-value order-total" id="order-total" th:text="${order != null ? order.money : ''}"></span>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 支付二维码区域 -->
    <div class="payment-qrcode">
      <h3>请使用支付宝扫描以下二维码完成支付</h3>
      <!-- 显示后端直接生成的二维码 -->
      <div class="row">
        <div class="col-lg-6 col-md-8 m-auto">
          <div class="login-wrapper">
            <img id="qrcode" src="">
          </div>
        </div>
      </div>

<!--      &lt;!&ndash; 如果后端没有直接生成二维码，则显示动态加载的二维码 &ndash;&gt;-->
<!--      <div th:if="${qrcode == null}">-->
<!--        <div id="loading-qrcode">正在生成支付二维码...</div>-->
<!--        <img id="qrcode-img" style="display:none;width:300px;height:300px;" alt="支付二维码" />-->
<!--      </div>-->

<!--      <div class="mt-3">-->
<!--        <a th:href="@{'/shopping/personalinformation'}" class="btn btn-secondary">返回订单列表</a>-->
<!--      </div>-->
    </div>

    <!--<div class="payment-success" id="payment-success">
      <i class="fa fa-check-circle"></i>
      <h3>支付成功</h3>
      <p>您的订单已支付成功，我们将尽快为您发货</p>
      <a href="/shopping/personalinformation" class="btn-pay">查看订单</a>
    </div>-->

    <!--<div class="payment-notice">
      <p><i class="fa fa-info-circle"></i> 温馨提示：</p>
      <ol>
        <li>请确认订单信息无误后再进行支付</li>
        <li>支付完成后，请勿关闭页面，系统会自动跳转到支付结果页</li>
        <li>如遇支付问题，请联系客服：400-123-4567</li>
      </ol>
    </div>-->

    <!--<div class="payment-actions">
      <button class="btn-cancel" onclick="cancelPayment()">取消支付</button>
      <button class="btn-pay" onclick="checkPaymentStatus()">我已支付</button>
    </div>-->
  </div>
</div>

<script src="layui/layui.all.js"></script>
<script>
  const $=layui.$;
  const urlParams = new URLSearchParams(window.location.search);
  const orderId = Number(urlParams.get('orderid'));
  if(!orderId){
    location.href="page/index";
  }
  $.ajax({
    url:'order/payment',
    data:{orderid:orderId},
    dataType:'json',
    success:function(result){
      let imgcode;
      if(typeof result=='object'){
        if(result.data){
          imgcode=result.data;
        }else if(result.code==0&&result.msg){
          imgcode=result.msg;
        }else{
          imgcode=JSON.stringify(result);
          layer.msg("二维码数据格式不正确,请联系管理员");
        }
      }else if(typeof result=='string'){
        imgcode=result;
      }else{
        layer.msg("二维码数据格式不支持");
        return;
      }
      console.log(result);
      $("#qrcode").attr("src","data:image/png;base64,"+imgcode);
    },
    error:function(){
      layer.msg("二维码生成失败！");
    }
  });

  let statusinterval=setInterval(function(){
    $.ajax({
      url:'order/getorderstatus',
      data:{orderid:orderId},
      success:function(result){
        if(result.data>0){
          layer.msg("支付成功",{icon:1});
          clearInterval(statusinterval);
          setTimeout(function(){
            //跳转到我的订单页面
            location.href="/shopping/personalinformation?tab=my-orders"
          },1800)
        }
      }
    });
  },1500)
</script>
</body>
</html>